<template>
  <div class="map">
    <div class="container" :class="{modal:modal,nomodal:!modal}">
      <div class="search">
        <div class="select">
          <span>省</span>
          <select v-model="provinceIndex" @change="provinceChange">
            <option v-for="(item,index) in provinceData" :value="index" :key='index'>{{item.label}}</option>
          </select>
        </div>
        <div class="select">
          <span>市</span>
          <select v-model="cityIndex">
            <option v-for="(item,index) in cityData[provinceIndex]" :value="index" :key='index'>{{item.label}}</option>
          </select>
        </div>
        <div class="select">
          <span>区</span>
          <select v-model="areaIndex">
            <option v-for="(item,index) in areaData[provinceIndex][cityIndex]" :value="index" :key='index'>{{item.label}}</option>
          </select>
        </div>
        <div class="select">
          <input placeholder="关键词" v-model="keyword" />
        </div>
        <div class="select">
          <a href="#" @click="searchClick">搜索</a>
        </div>
      </div>
      <div class="result">
        <div class="list" v-if="show">
          <div class="item" v-for="(item,index) in pois" :key='index' @click="listClick(item)">
            <div class="line name">
              <div class="title">名称:</div>
              <div class="value">{{item.title}}</div>
            </div>
            <div class="line address">
              <div class="title">地址:</div>
              <div class="value">{{item.address}}</div>
            </div>
            <div class="line phone">
              <div class="title">联系方式:</div>
              <div class="value">{{item.tel}}</div>
            </div>
            <div class="line point">
              <div class="title">坐标:</div>
              <div class="value">经度：{{item.location.lng}}纬度：{{item.location.lat}}</div>
            </div>
          </div>
        </div>
        <div class="list" v-else>
          <span>{{listMsg}}</span>
        </div>
        <div id="container"></div>
        <div class="loadShop">
          <div class="title">
            <span class="label">商户名：</span><span class="value">{{selectData.title}}</span>
          </div>
          <div class="title">
             <span class="label">联系方式：</span><span class="value">{{selectData.tel}}</span>
          </div>
          <div class="title">
             <span class="label">地址：</span><span class="value">{{selectData.address}}</span>
          </div>
          <a class="loadinput" href="#" @click="updataload">导入</a>
        </div>
      </div>
    </div>
    <div class="box" :class="{alert:modal,noalert:!modal}">
      <div class="title">消息</div>
      <div class="content">{{msg}}</div>
      <div class="btn" @click="modalOk">确定</div>
    </div>
  </div>
</template>
<script>
// import maps from "qqmap"
import areaData from "./citydata/area.js"
import cityData from "./citydata/city.js"
import provinceData from "./citydata/province.js"
console.log("windows", window)
let TMap = window.TMap
window.app = "";
export default {
  name: 'Map',
  props: {
    // width: {
    //   type: Number,
    //   default: 400
    // },
    // height: {
    //   type: Number,
    //   default: 200
    // },
  },
  data() {
    return {
      // 嘉兴坐标
      lanlat:{x:30.755040,y:120.760109},
      //腾讯地图
      key:'GUIBZ-VGEW3-76L3H-YVSIK-GZ64O-ELB2E',
      mapId: 'container',
      infoWindow: '',
      map: null,
      getAddress: null,
      getAddCode: null,
      addressKeyword: '',
      pageIndex: 1,
      pageCapacity: 50,
      searchService: {},
      marker: false,
      markers: [],
      pois: [],
      // 选中信息
      selectData:{
          title:"",
          tel:"",
          address:""
      },
      // 省市县信息
      areaData,
      cityData,
      provinceData,
      // 区域选择
      provinceIndex: 10,
      cityIndex: 3,
      areaIndex: 0,
      areaValue: "",
      keyword: "面",
      // 默认配置
      msg: '',
      listMsg: "空",
      show: false,
      modal: false,
      demoTab: this.getMapInfo
    };
  },
  components: {},
  created() {
    app = this;
    console.log('创建');
  },
  beforeMount() {
    console.log('挂载前');
  },
  mounted() {
    console.log('挂载', );
    let _this = this;

    setTimeout(function() {
      _this.init();
    }, 1000);
  },
  watch: {},
  methods: {
    // 初始化地图
    init() {
      var center = new TMap.LatLng(this.lanlat.x,this.lanlat.y);
      //初始化地图
      let that = this;
      this.map = new TMap.Map(that.mapId, {
          rotation: 0,//设置地图旋转角度
          pitch:0, //设置俯仰角度（0~45）
          zoom:12,//设置地图缩放级别
          center: center//设置地图中心点坐标
      });
      // 初始化覆盖层
      this.marker = new TMap.MultiMarker({
          id: 'marker-layer',
          map: this.map,
          styles: {
              "marker": new TMap.MarkerStyle({
                  "width": 25,
                  "height": 35,
                  "anchor": { x: 16, y: 32 },
                  "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
              })
          },
          geometries: [{
              "id": 'demo',
              "styleId": 'marker',
              "position": new TMap.LatLng(39.984104, 116.307503),
              "properties": {
                  "title": "marker"
              }
          }]
      });
    },
    // 选择操作
    provinceChange() {
      console.log("省份选择", this.provinceIndex)
      this.cityIndex = 0
    },
    // 搜索
    searchClick() {
      if(this.keyword.length<1)
      {
        this.showModal("关键词为空")
        return
      }
      // this.clearMarker()
      this.areaValue = this.areaData[this.provinceIndex][this.cityIndex][this.areaIndex].label
      let url = "https://apis.map.qq.com/ws/place/v1/search"
      this.$jsonp(url, {
          key: this.key,
          boundary: `region(${this.areaValue})`,
          keyword: this.keyword,
          page_size: 20,
          output: "jsonp"
      }).then(res => {
          console.log("成功结果",res)
          if(res.data.length>0){
            this.pois = res.data
            this.show = true
            this.cb(res)
            console.log("结果列表",this.pois)
          }else{
            console.log("搜索结果为空")
            this.showModal("搜索结果为空")
            this.show = false
        return
          }
      }).catch(err => {
         console.log("失败结果",err)
      })
    },

    
    // 创建标记
    cb(ret) {
      let newBounds = new TMap.LatLngBounds();
      let markerArr = [];
      if(ret && ret.status===0 && ret.data.length>0) {
        // 将搜索结果保存进数组中
        ret.data.forEach( (item, index) => {
          let position = new TMap.LatLng(item.location.lat, item.location.lng);
          markerArr.push({
            data:item,
            position: position,
            properties: {
              title: item.title,
              address: item.address,
              tel: item.tel!==' ' ? item.tel : '暂无'
            }
          });
          // 寻找搜索结果的边界
          newBounds.extend(position);
        });
        // 更新marker层，显示标记
        this.marker.setGeometries(markerArr);
        // 绑定点击事件
        this.marker.on("click", this.selectMark)
        // 地图自适应边界
        this.map.fitBounds(newBounds, {
          padding: 100  // 边界与内容之间留的间距
        });
      }
    },

    // 选中标签
    selectMark(evt){
      console.log("点击了MARKER",evt)
      this.selectData = evt.geometry.data
    },

    // 点击查看
    updataload() {
      let data = this.selectData;
      console.log("更新信息", data)
      data['province'] = this.provinceData[this.provinceIndex].label;
      data['city'] = this.cityData[this.provinceIndex][this.cityIndex].label;
      data['district'] = this.areaData[this.provinceIndex][this.cityIndex][this.areaIndex].label
      data['name'] = this.selectData.title
      data['phone'] = this.selectData.tel
      data['latLng'] = this.selectData.location
      console.log("更新信息", data)

      //回调事件
      this.$emit('change', data);
    },


    // 清除标记点
    clearMarker() {
      if (this.marker) {
          this.marker.setMap(null);
          this.marker = null;
      }
    },

    // 点击切换位置
    listClick(data) {
      console.log("点击切换",data)
      this.selectData = data
      this.map.easeTo({zoom:17,center: data.location},{duration: 2000});//平滑缩放,旋转到指定级别
    },

    // 信息弹窗
    showModal(title) {
      this.msg = title
      this.modal = true
    },
    // 点击确认
    modalOk() {
      console.log("点击确定")
      this.modal = false
    }
  }
};

</script>
<style scoped>
.map {
  width: 100%;
  height: 100%;
  background: #e9e9e9;
  position: relative;
}

.container {
  height: 100%;
}

.modal {
  filter: blur(5px);
  transition: all .2s;
}

.nomodal {
  filter: blur(0px);
  transition: all .2s;
}

.search {
  width: 100%;
  text-align: left;
  float: left;
  height: 30px;
  border-bottom: 1px solid #bebebe;
  line-height: 30px;
}

.select {
  margin-left: 20px;
  float: left;
}

.select span {
  margin-right: 10px;
}

.select select {
  height: 25px;
  width: 100px;
  border: #E9E9E9 1px solid;
}

.select a {
  display: block;
  background: #fff;
  color: #6a6a6a;
  text-decoration: none;
  width: 50px;
  text-align: center;
  height: 25px;
  line-height: 25px;
  margin-top: 2px;
}

.result {
  width: 100%;
  height: 100%;
  display: flex;
}

.list {
  width: 270px;
  height: calc(100% - 30px);
  overflow-y: scroll;
}

.list .item {
  font-size: 0.5rem;
  padding-left: 5px;
  border-bottom: 1px solid #2C3E50;
  padding-top: 5px;
}

.list .item .line {
  width: 100%;
  height: 22px;
  display: flex;
}

.list .line .title {
  width: 60px;
  text-align: left;
}

.list .line .value {
  text-align: left;
  display: flex;
  flex: 1;
}

.list .address {
  height: 40px !important;
}

#container {
  height: calc(100% - 30px);
  display: flex;
  flex: 1;
}

.alert {
  position: absolute;
  top: 30%;
  right: 35%;

  left: 50%;
  width: 0;
  height: 0;
  

  overflow: hidden;
  border-radius: 10px;
  background: #ececec;
  opacity: 0.8;
  -webkit-animation: fadeleftIn .3s forwards;
  animation: fadeleftIn .3s forwards;
  -webkit-animation-name: popIn;
  animation-name: popIn;
}

@-webkit-keyframes popIn {
  0% {
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    opacity: 0;
  }

  50% {
    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(0.5, 0.5, 0.5);

    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 1;
    left: 35%;
  width: 30%;
  height: 130px;
  }
}

@keyframes popIn {
  0% {
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    opacity: 0;
  }

  50% {
    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 1;
    left: 35%;
  width: 30%;
  height: 130px;
  }
}

.noalert {
   /*display: none; */
  position: absolute;
  top: 30%;
  left: 35%;
  right: 35%;
  width: 30%;
  height: 130px;
  overflow: hidden;
  border-radius: 10px;
  background: #ececec;
  opacity: 0.8;
  -webkit-animation: fadeleftOut .3s forwards;
  animation: fadeleftOut .3s forwards;
  -webkit-animation-name: popOut;
  animation-name: popOut;
}

@-webkit-keyframes popOut {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }

  50% {
    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
  }

  100% {
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0.5, 0.5, 0.5);

    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    width: 0;
    height: 0;
  }
}

@keyframes popOut {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }

  50% {
    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
  }

  100% {
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0.5, 0.5, 0.5);

    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    left: 50%;
    width: 0;
    height: 0;
  }
}



.box{
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
}
.box .title{
    width: 100%;
    border-bottom: 1px solid #a7a7a7;
    height: 40px;
    line-height: 40px;
}
.box .content{
    width: 100%;
    border-bottom: 1px solid #a7a7a7;
    height: 50px;
    line-height: 50px;
    padding-top: 0;
}
.box .btn{
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #007ece;
}

.loadShop{
  height: 110px;
  width: 170px;
  background: #fff;
  position: absolute;
  border:#d0d0d0 1px solid;
  border-radius: 10px;
  left: 300px;
  top: 50px;
  z-index: 9999;
  padding:10px;
  text-align: left;
  font-size: 0.6rem;
  overflow: hidden;
}
.loadShop .title{
  height: 17px;
  width: 100%;
}
.loadShop .label{
  width: 65px;
  display: block;
  float: left;
}
.loadShop .value{
  display: block;
  float: left;
  width: calc(100% - 70px)
}
.loadShop .loadinput{
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 150px;
  border-radius: 5px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: #f0f0f0;
}
.loadShop .loadinput:hover{
  background: #f5f5f5;
}
</style>
